import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

const EchartsDemo = (props: { dashboardData: any }) => {
    const { dashboardData } = props;
    console.log(dashboardData);

    const chartRef = useRef(null);
    const scale = 1;
    const echartData = [
        {
            value: dashboardData.eqTestCompleted || 0,
            name: 'Completed',
        },
        {
            value: dashboardData.eqTestNotStarted || 0,
            name: 'Not started',
        },
    ];
    const rich = {
        yellow: {
            color: '#ffc72b',
            fontSize: 30,
            padding: [5, 4],
            align: 'center',
        },
        total: {
            color: '#ffc72b',
            fontSize: 40,
            align: 'center',
        },
        white: {
            color: '#fff',
            align: 'center',
            fontSize: 14,
            padding: [21, 0],
        },
        blue: {
            color: '#49dff0',
            fontSize: 16,
            align: 'center',
        },
        hr: {
            borderColor: '#0b5263',
            width: '100%',
            borderWidth: 1,
            height: 0,
        },
    };
    useEffect(() => {
        const chartDom = chartRef.current;
        const myChart = echarts.init(chartDom);
        const option = {
            backgroundColor: '#fff',
            title: {
                show: false,
                // text:'总考生数',
                // left:'center',
                // top:'53%',
                // padding:[24,0],
                // textStyle:{
                //     color:'#fff',
                //     fontSize:18*scale,
                //     align:'center'
                // }
            },
            grid: {
                top: '2%',
                left: '2%',
                right: '2%',
                bottom: '0%',
            },
            legend: {
                orient: 'horizontal',
                icon: 'circle',
                x: '2%',
                y: '90%',
                itemWidth: 10,
                itemHeight: 10,
                align: 'left',
                textStyle: {
                    rich: {
                        name: {
                            fontSize: 12,
                        },
                        value: {
                            fontSize: 16,
                            padding: [0, 5, 0, 15],
                        },
                        unit: {
                            fontSize: 12,
                        },
                    },
                },
                formatter: function (name) {
                    let total = 0; //各科正确率总和
                    echartData.forEach(function (item, index, array) {
                        if (name == item.name) {
                            total += item.value * 1;
                        }
                    });
                    console.log(name, echartData);
                    return `${name}(${total})`;
                },
            },
            series: [
                {
                    name: 'FRIENeeD EQ test metric',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['30%', '35%'],
                    label: {
                        normal: {
                            show: false,
                        },
                    },
                    labelLine: {
                        normal: {
                            show: false,
                        },
                    },
                    hoverAnimation: false,
                    color: ['#ff7828', '#576b96'],
                    data: echartData,
                },
            ],
        };
        myChart.setOption(option);
        return () => {
            myChart.dispose();
        };
    }, [dashboardData]);

    return (
        <div className="echarts-container">
            <div ref={chartRef} style={{ width: '293px', height: '238px' }} />
        </div>
    );
};

export default EchartsDemo;
